feat: added search bar#2702
Conversation
Reviewer's GuideIntroduces a real-time search feature in InstrumentsScreen by adding state and filtering logic, refactoring the UI to include a search bar with clear/empty-state handling, and updating the list rendering to reflect the filtered results. Sequence Diagram: Instrument FilteringsequenceDiagram
actor User
participant TextField
participant ISS as _InstrumentsScreenState
User->>TextField: Types search query
TextField->>ISS: onChanged(query)
ISS->>ISS: _filterInstruments(query)
ISS->>ISS: setState()
Sequence Diagram: Clearing Search InputsequenceDiagram
actor User
participant CB as ClearButton
participant ISS as _InstrumentsScreenState
participant SC as _searchController
User->>CB: Taps clear icon
CB->>ISS: onPressed()
ISS->>SC: clear()
ISS->>ISS: _filterInstruments('')
ISS->>ISS: setState()
Class Diagram: Changes to _InstrumentsScreenStateclassDiagram
class _InstrumentsScreenState {
+TextEditingController _searchController
+List<int> _filteredIndices
+void initState()
+void dispose()
+void _filterInstruments(String query)
+Widget build(BuildContext context)
+void _onItemTapped(int index)
}
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
|
Looks like a good addition. The build is failing for deprecated libraries. |
Replaced deprecated libraries with their latest supported alternatives to fix the build issues. |
|
Build successful. APKs to test: https://github.com/fossasia/pslab-android/actions/runs/15738927126/artifacts/3356546992 |
| child: Column( | ||
| children: <Widget>[ | ||
| Padding( | ||
| padding: const EdgeInsets.all(16.0), |
There was a problem hiding this comment.
This seems a bit too wide. Can you check what is the average padding between a search bar and a similar looking list item in other established Flutter apps?
There was a problem hiding this comment.
I have checked a few Flutter apps, and it seems that 16px is commonly used for horizontal padding, while vertical padding ranges from 8px to 16px. I will make the changes based on your suggestion sir.
There was a problem hiding this comment.
padding: const EdgeInsets.symmetric(vertical: 8.0,horizontal: 16.0)
Yugesh-Kumar-S
force-pushed
the
Search-bar
branch
from
fc3adb2 to
8cf509b
Compare
CloudyPadmal
left a comment
CloudyPadmal
left a comment
There was a problem hiding this comment.
Looks like a good addition!
|
@Yugesh-Kumar-S Functionality wise this is a nice addition ! However, I feel that we can improve the look of the search bar a bit. I'll get back to you with some suggestions. Would you like to have a look at the design as well ? |
Yeah sure |
AsCress
added
the
Status: Review Required
|
My suggestion would be to hide the search bar by default and to either add a 🔍 icon the app bar (between he USB connection symbol and the menu icon) or to add a Floating Action Button to enable the search bar. Then the user would be able to search, but the search bar would not use a lot of space on smaller screens. |
|
Good point @marcnause ! @Yugesh-Kumar-S , Is it possible to add the search bar in to title bar, where a text field expands upon clicking 🔍 button next to the current USB icon button? |
|
@CloudyPadmal @marcnause I have added the search icon in the Appbar which expands on clicking the icon :) . screen-20250618-222041.mp4 |
CloudyPadmal
left a comment
CloudyPadmal
left a comment
There was a problem hiding this comment.
That's what I had in mind 👍🏼
|
@Yugesh-Kumar-S Makes much more sense now ! Excellent man ! |
4 participants
Closes #2704
Since the PSLab has many instruments , it becomes hard for users to scroll down to search a specific instrument . So i have added a search bar that filters the instruments based on the instrument name.
Changes
Screenshots / Recordings
Final Commit
screen-20250618-222041.mp4
Screen.Recording.2025-05-25.185557.mp4
Checklist:
strings.xml,dimens.xmlandcolors.xmlwithout hard coding any value.strings.xml,dimens.xmlorcolors.xml.Summary by Sourcery
Add a search bar to the Instruments screen to allow users to filter the list of instruments by name.
New Features: